jQuery 強大的選取器（一）

js忍之道 js原創

zivhsiao 2012-04-11 08:39:57 ‧ 9526 瀏覽

分享至

jQuery 基本的Selector介紹
jQuery強大之處在於selector的應用，可以隨著屬性去控制網頁上面的元素(elements)
其Selector可以是元素的id, name, class, 甚至使用filter加以處理

以下就基本的selector使用，透過範例做說明

畫面中某Id物件
假設某物件的id為div1
$(‘#div1’)
假設有好多個id都是div1
依照w3規定 : 不可以重複的id
可以透過自定屬性的方式來解決。
範例：

	<div id="div2">我是第1個div2</div>
	<div id="div2" subid="1">我是第2個div2</div>
	<div id="div2">我是第3個div2</div>
	<div id="div2">我是第4個div2</div>
	<div id="div2">我是第5個div2</div>
</BODY>

選取某一種類的element
選取某種tag的element(全部)
例如：選取所有div物件
$(‘div’)
符合特定類別
$(‘.d1’)
所有物件(少用)
$(“*”)

範例：

<HTML>
	<HEAD>
		<Script Type="text/javascript" src="js/jQuery.js"></Script>
		<Script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$('div').removeClass();
					$('div').addClass('d2');
				});
				$('#btn2').click(function(){
					$('.d2').html('我的class=d2');
				});
				$('#btn3').click(function(){
					$('p').addClass('d3');
				});
				$('#btn4').click(function(){
					$('*').removeClass();
					$('*').addClass('d4');
				});
			})
		</Script>
		<Style type="text/css">
			.d1
			{
				background-color:red;
				color:green;
			}
			.d2
			{
				background-color:orange;
				color:blue;
			}
			.d3
			{
				background-color:yellow;
				color:blue;
			}
			.d4
			{
				background-color:green;
				color:red;
			}
		</Style>
	</HEAD>
	<BODY>
		<input type="Button" id="btn1" name="btn1" value="全部div改變"><br>
		<input type="Button" id="btn2" name="btn2" value="改變class=d2的"><br>
		<input type="Button" id="btn3" name="btn3" value="改變p的"><br>
		<input type="Button" id="btn4" name="btn4" value="改變所有的*"><br>
		
		<hr />
		<div id="div1" class="d1">我是div1</div>
		<div id="div2" class="d2">我是div2</div>
		<div id="div3" class="d3">我是div3</div>
		<div id="div4" class="d4">我是div4</div>
		<p>我是p</p>
		
	</BODY>
</HTML>

有層概念的物件
Div1中的p
$(‘#div1 p’)
Div1後的第一個p
$(‘#div1 + p’)
Div1後所有的p
$(‘#div1 ~ p’)

範例：

<HTML>
	<HEAD>
		<Script Type="text/javascript" src="js/jQuery.js"></Script>
		<Script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$('#div1 p').addClass('d1');
				});
				$('#btn2').click(function(){
					$('#div *').removeClass();
					$('#div1').addClass('d2');
				});
				$('#btn3').click(function(){
					$('#div1 + p').addClass('d2');
				});
				$('#btn4').click(function(){
					$('#div1 ~ p').addClass('d2');
				});
			})
		</Script>
		<Style type="text/css">
			.d1
			{
				background-color:orange;
				color:blue;
			}
			.d2
			{
				background-color:blue;
				color:yellow;
			}
		</Style>
	</HEAD>
	<BODY>
		<input type="Button" id="btn1" name="btn1" value="改變div1中的p">
		<br />
		<input type="Button" id="btn2" name="btn2" value="改變整個div1">
		<br />
		<input type="Button" id="btn3" name="btn3" value="改變div1後第1個p(div1 + p)">
		<br />
		<input type="Button" id="btn4" name="btn4" value="改變div1後所有p(div1 ~ p)">
		<hr />
		<div id="div1">
			這是div1裡面的內容
			<p>這是P裡面的內容</p>
		</div>
		<p>div1後第1個P</p>
		<p>div1後第2個P</p>
		<p>div1後第3個P</p>
	</BODY>
</HTML>

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 則留言

appleboy

iT邦新手 4 級 ‧ 2012-04-11 09:57:01

zivhsiao提到：
依照w3規定 : 不可以重複的id

既然你都寫了W3C的規定，怎麼例子裡面還會出現重複呢？

&lt;pre class="c" name="code">&lt;div id="div2">我是第1個div2&lt;/div>  
&lt;div id="div2" subid="1">我是第2個div2&lt;/div>  
&lt;div id="div2">我是第3個div2&lt;/div>  
&lt;div id="div2">我是第4個div2&lt;/div>  
&lt;div id="div2">我是第5個div2&lt;/div>

回應 2
檢舉

zivhsiao iT邦新手 4 級 ‧ 2012-04-23 09:18:42 檢舉

這個範例的用意在於自定義屬性
假設 id 或 name 相同，可以透過自定義屬性抓取到該Element

zivhsiao iT邦新手 4 級 ‧ 2012-04-23 09:21:11 檢舉

雖然 W3C的規範中，id 不能重複，不過特別的應用上還是會看到使用相同 id 的寫法
其實可以透過class指定一個css名稱處理來解決也是一種比較好的方法

登入發表回應

andrewdsc

iT邦新手 4 級 ‧ 2012-04-13 13:24:19

$(document).ready(function(){
$('#btn1').click(function(){
$('#div1').html('<b>我是div1</b...(恕刪)

&lt;pre class="c" name="code"> $(document).ready(function(){  
                $('#btn1').click(function(){  
                    $('#div1').html('&lt;b>我是div1&lt;/b>');  
                });  
                $('#btn2').click(function(){  
                    $('div:[subid="1"]').addClass('st1');  
                });  
            })

是為了講解這一段的程式碼啊~~~~